<template>
  <div ref="container" class="webgl-container">
      <canvas ref="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { refresh } from '@/webgl/index'

const route = useRoute()
const container = ref<HTMLDivElement>()
const canvas = ref<HTMLCanvasElement>()
let gl: WebGLRenderingContext
watch([container, canvas, route], ([newContainer, newCanvas, newRoute]) => {
  if (!newContainer || !newCanvas || newRoute.name !== 'webgl') return
  if (!gl) {
    const { offsetWidth, offsetHeight } = newContainer as HTMLDivElement
    newCanvas.width = offsetWidth
    newCanvas.height = offsetHeight
    gl = newCanvas.getContext('webgl') as WebGLRenderingContext
  }
  refresh(gl, newRoute.params.id as string, newCanvas)
}, {
  immediate: true
})
</script>
<style lang="scss" scoped>
.webgl-container{
  width: 100%;
  height: 100%;
}
</style>
